<!-- 订单列表 -->
<template>
    <div class="DealerInfoStyle">
        <div class="cardAdmin">
            <div class="formContainer">
                <div class="formSearch">
                    <span
                        style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">开始时间：</span>
                    <el-date-picker style="flex: 3;" v-model="form.start_time" :format="'yyyy-MM-dd HH:mm:ss'"
                        :value-format="'yyyy-MM-dd HH:mm:ss'" type="datetime" placeholder="选择开始时间">
                    </el-date-picker>
                </div>
                <div class="formSearch">
                    <span
                        style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">结束时间：</span>
                    <el-date-picker style="flex: 3;" v-model="form.end_time" :format="'yyyy-MM-dd HH:mm:ss'"
                        :value-format="'yyyy-MM-dd HH:mm:ss'" type="datetime" placeholder="选择结束时间">
                    </el-date-picker>
                </div>
                <div class=""
                    style="height: 40px;;width: 100%;justify-content: right;margin-right: 6px;position: relative;">
                    <el-button class="el-icon-search" style="position: absolute;right: 0;top: 3px;" type="primary"
                        size="small" @click="get_logsList()"> 查询</el-button>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <el-table :data="crawlStocksTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">

            <el-table-column resizable prop="id" label="ID" width="60" align="center"></el-table-column>


            <el-table-column resizable prop="code" label="验证码" width="auto" min-width="120px"
                align="center"></el-table-column>


            <el-table-column resizable prop="phone_number" label="手机号码" width="auto" min-width="180px"
                align="center"></el-table-column>


            <el-table-column resizable prop="type" label="类型" width="auto" min-width="120px"
                align="center"></el-table-column>


            <el-table-column resizable prop="add_time" label="发送时间" width="auto" min-width="200px"
                align="center"></el-table-column>


            <el-table-column resizable prop="status" label="status" width="auto" min-width="120px"
                align="center"></el-table-column>


        </el-table>

        <!-- 分页 -->
        <div style="text-align: right; margin-top: 5px;">
            <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
                @current-change="current_change"></el-pagination>
        </div>
    </div>
</template>
  
<script>
import { logsList } from "@/utils/api";
export default {
    name: 'crawlStocksInfo',
    data() {
        return {
            form: {
                start_time: '',
                end_time: '',
            },
            crawlStocksTable: [],
            total: 100, //总条数
            pagesize: 10, //指定展示多少条
            currentPage: 1, //当前页码
            titles: '',
            roleHeadgear: null,
            is_public: 0
        };
    },
    mounted() {
        this.get_logsList()
    },

    methods: {
        // 查询订单列表
        async get_logsList() {
            let data = {};
            data.page = this.currentPage

            if (this.form.start_time !== '') data.start_time = this.form.start_time
            if (this.form.end_time !== '') data.end_time = this.form.end_time

            const res = await logsList(data).catch((err) => {
                return console.error(err);
            });
            if (res && res.status == "200") {
                this.crawlStocksTable = res.data.data.data
                this.total = res.data.data.total
            } else {
                this.$message.error(res.data.message);
            }
        },
        // 分页
        current_change(currentPage) {
            this.currentPage = currentPage;
            this.get_logsList();
        },
    },
};
</script>
<style>
.cell {
    font-size: 12px;
    white-space: nowrap !important;
}

.el-dialog__body {
    padding: 0 10px !important;
}

.demo-table-expand {
    font-size: 0;
    margin-left: 10px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
<style lang="less" scoped>
.DealerInfoStyle {
    width: 100%;
    padding: 0 10px;
    // background-color: aquamarine;
    height: calc(100vh - 100px);
    // border: 1px #000 solid;

    .cardAdmin {
        position: relative;
        // height: 18%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0;

        border: #ebeef5 solid 1px;
        padding: 0 5px;
        margin-bottom: 2px;


        .formContainer {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            align-self: baseline;
        }

        .formSearch {
            // width: 25%;
            min-width: 25%;
            margin: 10px 0;
            height: 40px;
            display: flex;
            justify-content: center;
        }
    }

    .pop-up-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        align-self: baseline;
        margin: 10px 0;
        justify-content: center;
        padding-right: 15px;

        .form-options {
            width: 100%;
            min-width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }
    }
}
</style>
  